<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" class="login_Form">
                <el-form-item prop='username'>
                    <el-input v-model="loginForm.username"  prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="loginForm.password"  type='password' prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item prop='password'>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
    data() {
        return {
            //这是登录表单的数据绑定对象
            loginForm:{
                username : '',
                password : ''
            },
            loginFormRules:{
                username:[
                { required: true, message: '请输入用户名', trigger: 'blur' },
                // { min: 0, max: 20, message: '长度在 0 到 5 个字符', trigger: 'blur' }
                ],
               password:[
                { required: true, message: '请输入密码', trigger: 'blur' },
                // { min: 6, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields();
        },
        login(){
            this.$refs.loginFormRef.validate(async valid =>{
            //console.log(valid)
               if(!valid) return;

                let retData = Qs.stringify(this.loginForm)

                axios.post('login',retData,
                {
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded'  //如果写成contentType会报错
                    }
                }
                ).then((res)=>{
                    console.log('登录返回',res);
                    if(res.data.code != 200 ) return this.$message.error("登录失败！");
                    this.$message.success("登录成功");
                    //1.将登录完成之后的token,保存在客户端的sessionStorage 中
                    // 1.1 项目中出现了登录之外的其他api接口，必须在登录之后才能访问
                    // 1.2 token只应在当前的网站打开时间生效，所以需将token保存在seesionStorage中
                    //2.通过编程式导航跳转至后台主页，路由地址是/home
                    window.sessionStorage.setItem('token',res.data.data);
                    window.sessionStorage.setItem('username',this.loginForm.username);
                    this.$router.push('/Home');
                })
                .catch((err) => {
                console.log(err) //错误信息
                this.$message.error("登录失败！");
                })
            })
        }
    }
}
</script>

<style lang = 'less' scoped>
.login_container{
    background-color: #2b4b6b;
    height: 100%;
}
.login_box{
    width: 450px;
    height:300px;
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;

    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

    .login_Form{
        position: absolute;
        bottom: 0;
        padding: 10px;
        width: 95%;
    }

}
</style>